<template>
  <div class="main">
  <img class="outImg" src="../../../static/images/certificate.jpg" alt="">
  <img class="intImg" src="../../../static/images/certificate1.jpg" alt="">
  <h3 class="title">认证书</h3>
  <div class="name"><input v-model="name" type="text"><span>同志，</span></div>
  <div class="text">祝贺你完成了二十大知识理论学习。特颁此证，以资鼓励！</div>
  <div class="date">{{today}}</div>
  </div>
</template>

<script>
    export default {
        name: "index",
        data() {
          return {
            today:"",
            name:"",
          }
        },
        mounted() {
          this.getToday();
        },
        methods: {
          getToday() {
            let time = new Date();
            let years = time.getFullYear();    //获取完整的年份(4位,1970-????)
            let month = time.getMonth() + 1;       //获取当前月份(0-11,0代表1月)
            month = month < 10 ? ('0' + month) : month;
            let day = time.getDate();
            day = day < 10 ? ('0' + day) : day;
            this.today = years + '-' + month + "-" + day;
          }
        },
    }
</script>

<style scoped>
.main {
  width:100%;
  height:100vh;
  position: relative;
}
.outImg {
  width: 100%;
  height: 100vh;
}
.intImg {
  width: 94%;
  height: 94%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.name {
  width: 50vw;
  display: flex;
  position: absolute;
  left:15%;
  top: 37%;
  font-size: 23px;
}
.name input {
  width: 100px;
  border-bottom: 1px solid black;
  text-align: center;
}
.title {
  position: absolute;
  width: 100px;
  text-align: center;
  left: 50%;
  top: 17%;
  font-size: 32px;;
  transform: translateX(-50%);
  color: #f0d74b;
  font-weight: 900;
}
.text {
  text-indent: 2em;
  font-size: 23px;
  line-height: 1.5em;
  position: absolute;
  left: 50%;
  top: 43%;
  transform: translateX(-50%);
  color: #44443d;
  width: 80vw;
  padding-left:15px ;
}
.date {
  position: absolute;
  right: 13%;
  bottom: 13%;
  width: 200px;
  text-align: right;
  height: 30px;
}
</style>
